<template>
  <div class="show-main">
    <el-scrollbar style="height:100%">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="small">
        <el-form-item label="">
          <el-date-picker v-model="searchForm.date" clearable unlink-panels type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateChange" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="searchForm.send_id" clearable filterable remote reserve-keyword placeholder="请输入骑手名字" :remote-method="remoteMethod" :loading="loading">
            <el-option v-for="item in senderList" :key="item.id" :label="item.name +'-'+item.phone" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.stop="search">搜索</el-button>
          <el-button type="primary" @click.stop="reload">刷新</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="table" border size="small">
        <el-table-column prop="id" label="骑手ID"></el-table-column>
        <el-table-column prop="username" label="骑手昵称" width="100"></el-table-column>
        <el-table-column prop="name" label="骑手名字"></el-table-column>
        <el-table-column prop="phone" label="电话号码"></el-table-column>
        <el-table-column prop="gender" label="性别">
          <template slot-scope="scope">
            {{scope.row.gender == 0 ? '男生': '女生'}}
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型">
          <template slot-scope="scope">
            {{scope.row.type == 2 ? '学生配送员': '专业配送员'}}
          </template>
        </el-table-column>
        <el-table-column prop="think_count" label="超时次数"></el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="detail(scope.row.order_ids)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page" :page-sizes="[10,20,30,40]" :page-size="searchForm.limit"
          layout="total, sizes, prev, pager, next, jumper" :total="count">
        </el-pagination>
      </div>
      <el-dialog title="超时详情" :visible.sync="overtimeVisible" width="700px" :before-close="handleClose">
        <el-table :data="overtimeTable" border size="small">
          <el-table-column prop="id" label="订单ID"></el-table-column>
          <el-table-column prop="order_no" label="订单编号"></el-table-column>
          <el-table-column prop="receipt_time" label="接单时间">
            <template slot-scope="scope">
              {{timeFormat(scope.row.receipt_time)}}
            </template>
          </el-table-column>
          <el-table-column prop="send_time" label="送货时间">
            <template slot-scope="scope">
              {{timeFormat(scope.row.send_time)}}
            </template>
          </el-table-column>
          <el-table-column prop="arrive_time" label="收货时间">
            <template slot-scope="scope">
              {{timeFormat(scope.row.arrive_time)}}
            </template>
          </el-table-column>
          <el-table-column prop="over_time" label="超时(分钟)"></el-table-column>
          <el-table-column prop="create_time" label="创建时间">
            <template slot-scope="scope">
              {{timeFormat(scope.row.create_time)}}
            </template>
          </el-table-column>
        </el-table>
        <div class="layui-card-body ">
          <el-pagination @size-change="dialogSizeChange" @current-change="dialogCurrentChange" :current-page="overtimeSearch.page" :page-sizes="[10,20,30,40]" :page-size="overtimeSearch.limit"
            layout="total, sizes, prev, pager, next, jumper" :total="overtimeCount">
          </el-pagination>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close" size="small">关 闭</el-button>
        </span>
      </el-dialog>
    </el-scrollbar>
  </div>
</template>
<script>
import { formatDate } from '@/untils/common.js'
import { getSenderList, getOvertimeList, overtimeDetail } from '@/network/api.js'

export default {
  name: 'overtime',
  data () {
    return {
      info: {},
      searchForm: {
        page: 1,
        limit: 10,
        // date: [new Date(), new Date()],
        // start: formatOnlyDate(),
        // end: formatOnlyDate(),
        date: '',
        start: '',
        end: '',
        send_id: ''
      },
      senderList: [], // 骑手列表
      count: 0, // 总记录数
      overtimeCount: 0, // 详情总数
      table: [],
      overtimeTable: [],
      overtimeSearch: {
        limit: 10,
        page: 1,
        order_ids: ''
      },
      overtimeVisible: false,
      loading: false
    }
  },
  created () {
    const info = this.$storage.get('info')
    if (info === undefined) {
      return this.$message.error('登录失效，请重新登录')
    }
    this.info = info
    this.search()
  },
  computed: {
    timeFormat () {
      return (time) => {
        return formatDate(time)
      }
    }
  },
  methods: {
    reload () {
      location.reload()
    },
    dateChange (v) {
      if (v === null) {
        this.searchForm.start = ''
        this.searchForm.end = ''
      } else {
        this.searchForm.start = v[0] + ' 00:00:00'
        this.searchForm.end = v[1] + ' 23:59:59'
      }
    },
    // 动态搜索骑手名字
    async remoteMethod (name) {
      if (name !== '') {
        this.loading = true
        try {
          const rtn = await getSenderList({ name })
          this.loading = false
          this.senderList = rtn.data
        } catch (e) {
          this.loading = false
          this.$message.error(e.message)
        }
      } else {
        this.senderList = []
      }
    },
    async search () {
      try {
        const rtn = await getOvertimeList(this.searchForm)
        this.table = rtn.data.list
        this.count = rtn.data.count
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 每页条数变化
    handleSizeChange (val) {
      this.searchForm.limit = val
      this.search()
    },
    // 当前页变化
    handleCurrentChange (val) {
      this.searchForm.page = val
      this.search()
    },
    // 每页条数变化
    dialogSizeChange (val) {
      this.overtimeSearch.limit = val
      this.detailSearch()
    },
    // 当前页变化
    dialogCurrentChange (val) {
      this.overtimeSearch.page = val
      this.detailSearch()
    },
    async detailSearch () {
      try {
        const rtn = await overtimeDetail(this.overtimeSearch)
        this.overtimeVisible = true
        this.$nextTick(() => {
          this.overtimeTable = rtn.data.list
          this.overtimeCount = rtn.data.count
        })
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 超时详情
    detail (orderIds) {
      this.overtimeSearch.order_ids = orderIds
      this.detailSearch()
    },
    // 关闭弹出前操作(不包括取消按钮)
    handleClose (done) {
      this.overtimeSearch = {
        limit: 10,
        page: 1,
        order_ids: ''
      }
      done()
    },
    // 取消按钮
    close () {
      this.overtimeSearch = {
        limit: 10,
        page: 1,
        order_ids: ''
      }
      this.overtimeVisible = false
    }
  }
}
</script>
<style lang="less" scoped>
</style>
